<template>
  <view class="index-page">
    <!-- nav -->
    <tui-navigation-bar :isOpacity="false" class="nav">
      <view class="nav-content">
        <view class="left">
          <xboot-user-drawer />
          <text class="title"
            >你好，{{ userInfo.nickname ? userInfo.nickname : "游客" }}</text
          >
        </view>
        <view class="right">
          <tui-icon
            name="search"
            color="#333"
            size="25"
            unit="px"
            class="top"
            @click="toSearch"
          />
          <view class="iconfont icon-scan l" @click="scan" />
        </view>
      </view>
    </tui-navigation-bar>
    <!-- content -->
    <view class="content">
      <!-- banner -->
      <view class="banner-content">
        <swiper
          :autoplay="true"
          :interval="5000"
          :duration="500"
          :circular="true"
          class="banner-swiper"
        >
          <swiper-item
            v-for="(item, index) in banner"
            :key="index"
            @click="toNoticeDetail(item)"
          >
            <image :src="item" class="slide-image" mode="scaleToFill" />
          </swiper-item>
        </swiper>
      </view>
      <!-- notice -->
      <view class="notice-content">
        <tui-tag
          type="notice"
          size="13px"
          padding="4px 7px"
          class="notice"
          @click="toNews"
          >公告</tui-tag
        >
        <swiper vertical autoplay circular interval="5000" class="swiper">
          <swiper-item
            v-for="(item, index) in noticeList"
            :key="index"
            class="swiper-item"
            @click="toNoticeDetail(item)"
          >
            <view class="title ellipsis">{{ item.title }}</view>
          </swiper-item>
        </swiper>
        <text class="more" @click="toNews">更多</text>
      </view>
      <!-- num -->
      <view class="data-content">
        <view class="item border">
          <view class="num-wrap">
            <view class="num">2</view>
            <tui-badge
              type="danger"
              absolute
              :scaleRatio="0.45"
              translateX="40px"
              v-show="false"
            />
          </view>
          <view class="text">我的申请</view>
        </view>
        <view class="item border">
          <view class="num-wrap">
            <view class="num">0</view>
            <tui-badge
              type="danger"
              absolute
              :scaleRatio="0.45"
              translateX="40px"
              v-show="false"
            />
          </view>
          <view class="text">待办任务</view>
        </view>
        <view class="item" @click="toMessage">
          <view class="num-wrap">
            <view class="num">3</view>
            <tui-badge
              type="danger"
              absolute
              :scaleRatio="0.44"
              translateX="40px"
              v-show="true"
            />
          </view>
          <view class="text">消息提醒</view>
        </view>
      </view>
      <!-- used app -->
      <view class="app-content">
        <view class="title">常用</view>
        <tui-grid unlined>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/请假.png"></image>
              <view class="text">请假</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp('contact')"
          >
            <view class="item">
              <image class="icon" src="@/static/app/通讯录.png"></image>
              <view class="text">通讯录</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="/static/app/选项.png"></image>
              <view class="text">日程</view>
            </view>
          </tui-grid-item>

          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/icon/add.png"></image>
              <view class="text">添加</view>
            </view>
          </tui-grid-item>
        </tui-grid>
      </view>
      <!-- all app -->
      <view class="app-content">
        <view class="title">综合人事</view>
        <tui-grid unlined>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/考勤.png"></image>
              <view class="text">考勤打卡</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="/static/app/加班.png"></image>
              <view class="text">加班</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/出差.png"></image>
              <view class="text">出差</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/余额.png"></image>
              <view class="text">薪酬</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/账户.png"></image>
              <view class="text">档案</view>
            </view>
          </tui-grid-item>

          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/登记.png"></image>
              <view class="text">周报</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/icon/add.png"></image>
              <view class="text">添加</view>
            </view>
          </tui-grid-item>
        </tui-grid>
      </view>
      <!-- all app -->
      <view class="app-content">
        <view class="title">协同效率</view>
        <tui-grid unlined>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/会议.png"></image>
              <view class="text">电话会议</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/摄像头.png"></image>
              <view class="text">视频会议</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="/static/app/邮件.png"></image>
              <view class="text">邮箱</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/公告.png"></image>
              <view class="text">公告</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/攻略.png"></image>
              <view class="text">问卷</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/秒杀.png"></image>
              <view class="text">提醒</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/打车.png"></image>
              <view class="text">打车</view>
            </view>
          </tui-grid-item>

          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/icon/add.png"></image>
              <view class="text">添加</view>
            </view>
          </tui-grid-item>
        </tui-grid>
      </view>
      <!-- all app -->
      <view class="app-content">
        <view class="title">财务管理</view>
        <tui-grid unlined>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/报销.png"></image>
              <view class="text">报销</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/app/关税.png"></image>
              <view class="text">费用申请</view>
            </view>
          </tui-grid-item>
          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="/static/app/购物车.png"></image>
              <view class="text">采购申请</view>
            </view>
          </tui-grid-item>

          <tui-grid-item
            :cell="4"
            :hover="false"
            :bottomLine="false"
            :border="false"
            @click="toApp"
          >
            <view class="item">
              <image class="icon" src="@/static/icon/add.png"></image>
              <view class="text">添加</view>
            </view>
          </tui-grid-item>
        </tui-grid>
      </view>
    </view>
  </view>
</template>

<script>
import { openScan } from "@/common/js/scan.js";
export default {
  components: {},
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  data() {
    return {
      banner: [
        "/static/image/banner1.png",
        "/static/image/banner2.png",
        "/static/image/banner3.png",
      ],
      noticeList: [
        {
          title: "【直播】2021年世界互联网大会",
        },
        {
          title: "【新品发布】iPhone 13 Pro 强得很 立即换新",
        },
        {
          title: "【基金资讯】顶流新能源 仅3年收益TOP2",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    toSearch() {
      uni.navigateTo({
        url: "/pages/search/search",
      });
    },
    scan() {
      openScan();
    },
    toNews() {
      uni.navigateTo({
        url: "/pages/news/news",
      });
    },
    toNoticeDetail(v) {
      uni.navigateTo({
        url: "/pages/article/article",
      });
    },
    toMessage() {
      uni.switchTab({
        url: "/pages/message/message",
      });
    },
    toApp(v) {
      if (v == "contact") {
        uni.navigateTo({
          url: "/pages/app/contact/contact",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
